<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-18 14:54:40
 * @LastEditTime: 2024-07-11 17:55:57
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 资产面板
 * @FilePath: \chu-meng\client\src\pages\Design\components\SidebarArea\ComponentSidebar\Base\index.vue
 * Copyright 版权声明
-->

<template>
  <div class="modWrap">
    <div class="searchBox">
      <a-input-search
        size="small"
        v-model:value="keyword"
        placeholder="搜索关键词"
        style="width: 100%;"
        @search="onSearch"
      />
    </div>
    <a-divider style="margin: 12px 0;"/>
    <a-collapse v-model:activeKey="activeKey" ghost class="customScrollBar component-list">
      <a-collapse-panel v-for="item in BASE_COMPONENT_LIST" :key="item.type" :header="item.name">
        <a-row :gutter="[8, 8]">
          <a-col class="gutter-row" :span="12" v-for="items in item.children" :key="items.type">
            <a-button
              draggable="true"
              @dragstart="compDragstart($event, items)"
              @dragend="compDragend"
            >
              {{items.name}}
            </a-button>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup>
// import {
//   RotateLeftOutlined,
//   RotateRightOutlined,
//   FilePptOutlined
// } from '@ant-design/icons-vue'
import { generateUUID } from '@/utils'
import { ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

import { COMPONENT_LIST as BASE_COMPONENT_LIST } from '@/packages/components/AntDesignVue/index'

const keyword = ref('')
const onSearch = () => {}

const activeKey = ref(['Layout', 'Base', 'Form', 'High', 'Other'])

// 开始拖拽
const compDragstart = (e, item) => {
  // console.log(`🚀 ~ compDragstart ~ e:`, e)
  // console.log(`🚀 ~ compDragstart ~ item:`, item)
  const data = {
    // 组件id
    id: generateUUID('id_'),
    // 组件名称
    name: item.name,
    // 组件类型
    type: item.type,
    configType: item.configType,
    // 组件配置
    config: {}
  }
  store.dispatch('SetCurrentDragComponent', data)
}

// 拖拽结束
const compDragend = (e) => {
  // console.log(`🚀 ~ compDragend ~ e:`, e)
}

</script>

<style lang="scss" scoped>
.modWrap{
  .searchBox{
    padding: 0 12px;
  }
  .component-list{
    max-height: calc(100vh - 170px);
  }
  :deep(.ant-row) {
    .ant-col{
      .ant-btn{
        width: 100%;
      }
    }
  }
}
</style>
